<template>
  <div class="home">
    <h1>首页</h1>
    <h1 class="title">首页啊</h1>
    <h1 class="text-[red]">首页啊windi.css</h1>
    <p>当前语言：{{ lang }}</p>
    <p>{{ $t('admin') }}</p>
    <el-button type="primary" @click="changeLang('zh')">中文</el-button>
    <el-button type="primary" @click="changeLang('en')">英文</el-button>
    <el-date-picker
      v-model="value1"
      type="date"
      :placeholder="$t('dateSelected')">
    </el-date-picker>
    <el-slider v-model="value2"></el-slider>
    <ThemePicker></ThemePicker>
 <svg-icon icon-class="anq" class="icon" />
 <div>setTimeout(()=> {debugger;},2000)断点查看属性</div>
  </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker/index.vue'
import SvgIcon from '@/components/SvgIcon.vue'
export default {
  name: 'home',
  components: {
    ThemePicker,
    SvgIcon
  },
  data () {
    return {
      lang: '中文',
      value1: '',
      value2: 10
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    changeLang (type) {
      // 切换语言
      this.$i18n.locale = type
      this.lang = this.$t(`language.${type}`)
      // console.log(this.$t(`language.${type}`))
    }
  }
}
</script>

<style lang="scss" scoped>
// $mainColor: red;
// @import '@/style/variables.scss';
// @import url('../../style/variables.scss');
.title{
  color: $mainColor;
}
.icon {
  vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
}
</style>
